<script setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '智造云枢可视化总览'
  }
})

// 组件挂载状态
const isComponentMounted = ref(true)

// 当前时间
const currentTime = ref('--:--:--')

// 安全的时间格式化函数
const formatTime = () => {
  if (!isComponentMounted.value) return
  
  try {
    const now = new Date()
    const year = now.getFullYear()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = now.getDate().toString().padStart(2, '0')
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    const seconds = now.getSeconds().toString().padStart(2, '0')
    currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch (error) {
    console.error('时间格式化错误:', error)
    currentTime.value = '--:--:--'
  }
}

// 更新时间的定时器
let timer = null

// 组件挂载
onMounted(() => {
  isComponentMounted.value = true
  // 初始化时间
  formatTime()
  
  // 设置定时器，每秒更新时间
  timer = setInterval(formatTime, 1000)
})

// 在组件卸载前清除定时器
onBeforeUnmount(() => {
  isComponentMounted.value = false
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})

// 双重保证清除定时器
onUnmounted(() => {
  isComponentMounted.value = false
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<template>
  <div class="dashboard-wrapper-outer">
    <dv-border-box-11 class="dashboard-wrapper" title="数据可视化">
      <div class="dashboard-header">
        <h1>{{ title }}</h1>
        <div class="dashboard-time">{{ currentTime }}</div>
      </div>
      <div class="dashboard-content">
        <slot v-if="isComponentMounted"></slot>
      </div>
    </dv-border-box-11>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dashboard-wrapper-outer {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000c1a;
  position: relative;
}

.dashboard-wrapper {
  width: 100%;
  height: 100vh;
  padding: 20px; /* 减小内边距防止溢出 */
  overflow-y: auto !important; /* 启用垂直滚动 */
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  position: relative;
  text-align: center;
  overflow: hidden;
  flex-shrink: 0; /* 防止收缩 */
}

.dashboard-header h1 {
  font-size: 22px;
  color: #fff;
  margin: 0;
}

.dashboard-time {
  position: relative;
  right: 0;
  color: #fff;
  font-size: 12px;
  background-color: rgba(0, 20, 40, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(41, 182, 255, 0.3);
  text-shadow: 0 0 5px rgba(41, 182, 255, 0.5);
  white-space: nowrap;
}

.dashboard-content {
  width: 100%;
  flex: 1;
  overflow-y: auto !important; /* 强制启用垂直滚动 */
  padding-bottom: 20px; /* 底部留出空间 */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 强制显示滚动条 */
.dashboard-wrapper::-webkit-scrollbar,
.dashboard-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.dashboard-wrapper::-webkit-scrollbar-track,
.dashboard-content::-webkit-scrollbar-track {
  display: none !important;
}

.dashboard-wrapper::-webkit-scrollbar-thumb,
.dashboard-content::-webkit-scrollbar-thumb {
  display: none !important;
}

.dashboard-wrapper::-webkit-scrollbar-thumb:hover,
.dashboard-content::-webkit-scrollbar-thumb:hover {
  display: none !important;
}

/* 确保DataV边框允许内容滚动 */
:deep(.dv-border-box-11) {
  overflow: visible !important;
}

:deep(.dv-border-box-11__content) {
  overflow-y: auto !important;
}

body {
  background-color: #000c1a;
  color: #fff;
  overflow: hidden; /* 防止主体出现双重滚动条 */
}

/* 全局滚动条美化 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

::-webkit-scrollbar-track {
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}

::-webkit-scrollbar-thumb:hover {
  display: none;
}

/* 全局Firefox滚动条 */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 自定义面板样式 */
.dashboard-panel {
  height: auto; /* 允许自动调整高度 */
  min-height: 300px; /* 保证最小高度 */
  margin-bottom: 15px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.panel-header {
  color: #29b6ff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  position: relative;
  padding-left: 15px;
  z-index: 10;
}

.panel-header::before,
.panel-header::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 12px;
  background-color: #29b6ff;
}

.panel-header::before {
  clip-path: polygon(0 0, 50% 20%, 50% 80%, 0 100%);
}

.panel-header::after {
  left: 4px;
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 90%;
  position: relative;
  padding: 5px;
}

/* 调整第一行卡片高度 */
:deep(.dashboard-content .el-row:first-child .el-col) {
  height: 320px;
  margin-bottom: 30px;
}

/* 调整第二行卡片高度 */
:deep(.dashboard-content .el-row:nth-child(2) .el-col) {
  height: 330px;
  margin-bottom: 30px;
}

/* 调整第三行卡片高度 */
:deep(.dashboard-content .el-row:nth-child(3) .el-col) {
  height: auto;
  min-height: 300px;
}

/* 数据大屏边框调整 */
.dv-border-box-4, 
.dv-border-box-7, 
.dv-border-box-8, 
.dv-border-box-10,
.dv-border-box-11, 
.dv-border-box-12 {
  box-sizing: border-box;
  padding: 15px !important; /* 减小内边距 */
}

.dv-border-box-content {
  padding: 10px !important;
  position: relative;
  z-index: 1;
}

.el-row {
  margin-bottom: 15px;
  width: 100%;
}

.el-col {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* 行间距调整 */
.middle-row {
  margin-bottom: 20px;
}

/* Element UI 组件美化 */
:deep(.el-select-dropdown__item),
:deep(.el-select-dropdown__empty) {
  color: #fff;
  background: #001a33;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(10, 49, 97, 0.5);
  color: #00eaff;
}

:deep(.el-select-dropdown) {
  background-color: #001a33;
  border: 1px solid #0a3161;
}

:deep(.el-popper__arrow::before) {
  background: #001a33;
  border-color: #0a3161 !important;
}

:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {
  color: #00eaff;
  background-color: rgba(10, 49, 97, 0.7);
}

:deep(.el-scrollbar__thumb) {
  background: linear-gradient(to bottom, #3a7eff, #00eaff);
  border-radius: 4px;
}

:deep(.el-scrollbar__bar) {
  opacity: 0.8;
}

:deep(.el-scrollbar__bar):hover {
  opacity: 1;
}
</style> 